import { Tabs } from "antd-mobile";
import { useTabs } from "@/hooks/useTabs";
import HomeList from "./HomeList";
import "./index.scss";
import { useEffect, useState } from "react";
function Home() {
  // 获取频道列表数据
  const { channelList } = useTabs();
  // 当前激活的频道key(id)
  const [activeKey, setActiveKey] = useState("");
  // 切换tab的回调
  const changeTabs = (key: string) => {
    // 更新当前激活频道key
    setActiveKey(key);
  };
  // 组件挂载完毕频道列表数据返回
  useEffect(() => {
    setActiveKey(channelList[0]?.id.toString());
  }, [channelList]); // 当获取到channelList时初始化默认激活的key
  return (
    <>
      {/* tba区域 */}
      <Tabs
        activeKey={activeKey}
        style={{ backgroundColor: "#fff" }}
        onChange={changeTabs}
      >
        {channelList.map((item) => (
          <Tabs.Tab title={item.name} key={item.id}>
            <HomeList activeKey={activeKey} />
          </Tabs.Tab>
        ))}
      </Tabs>
    </>
  );
}

export default Home;
